<template>
  <div class="content_box">
    <!-- 兑换 -->
    <div class="duihuan_box">
      <div class="box">
        <p class="top_text">美团/抖音团购核销</p>
        <p class="img">
          <img src="/static/images/meituan.png" alt="">
          <img src="/static/images/douying.png" alt="">
        </p>
        <div class="input"> 
          <input v-model="mtCode" type="text" placeholder="请输入卡券兑换码">
          <img @click="scanCode" src="/static/images/saoma.png" alt="">
        </div>
        <p class="text">兑换须知：</p>
        <p class="text">1.选择要使用的房间，房间当前时间可能正在使用，<span>请注意开始时间</span>。</p>
        <!-- <p class="text">1.根据预定情况，部分时段由于已被选择，系统中部分时段不可选。</p> -->
        <p class="text">2.如果您使用过程中希望延长时长，可在订单进行续单操作。</p>
        <p class="text">3.在您点击下方按钮后，系统将即时生效，<span>无法操作退回</span>，请您确认好场次后再进行兑换。</p>
        <p class="text">4.如您在过程中遇到任何问题，可以及时联系我们。</p>
        <div class="dh_anniu_box">
          <van-button 
          @click="submit_mt"
          :disabled="loading"
          :loading="loading" 
          loading-text="验券中..."
          type="primary"
          color="#3d98f7"
          custom-style="width: 570rpx;height: 80rpx;line-height: 80rpx;border-radius: 50rpx;text-align: center;font-weight: 500;color: #fff;background:#00C200;border:none;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;"
        >立即验券</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Debounce } from "@/utils/index";

import { 
  receiptCheckout
} from "@/api/index";
export default {
  data() {
    return {
      active:0,
      isIphoneXnum:0,
      listIndex:0,
      isShow:false,
      available:'0.00',
      listIndex:0,
      changeMoney:{},// 充值选中的价格
      rechargeAmountId:'',// 充值列表ID
      rechargeRecordId:'',// 充值记录ID
      list:[],
      loading:false,
      mtCode:''
    };
  },
  methods: {

    // 美团验券-确认
    submit_mt(){
      if(this.mtCode == ''){
        this.$toast('请输入券码')
        return
      }
      this.loading = true
      this.mtVoucher(this.mtCode)
    },

    // 美团验券
    mtVoucher(receiptCode){
      receiptCode = receiptCode.replace(/\s*/g,"")
      console.log(receiptCode)
      this.$showLoading('验券中...')
      receiptCheckout({receiptCode}).then(res=>{
        if(res.statusCode == '00000'){
          setTimeout(() => {
            wx.hideLoading()
            wx.navigateTo({
              url: `/pages/mt/main?info=${JSON.stringify(res.data)}`,
            });
            this.loading = false
          }, 1000);
          
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

    // 扫码
    scanCode(){
      wx.scanCode({  // 调起客户端扫码界面进行扫码
        complete: (res) => {}, //接口调用结束的回调函数（调用成功、失败都会执行）
        fail:(res) => {},  //接口调用失败的回调函数
        // onlyFromCamera: true,  //是否只能从相机扫码，不允许从相册选择图片,这里是只允许相机扫码
        scanType: ['qrCode'],  // 扫码类型 : 二维码
        success:(it) => {  // 接口调用成功的回调函数
          console.log(it);
          this.mtCode = it.result
          this.mtVoucher(it.result)
        }
      })
    },
    
  },
  onLoad(options){
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  onShow() {
  },
  onUnload() {
    this.mtCode = ''
  }
};
</script>

<style lang="scss" scoped>
.content_box{
  width: 100%;
  .duihuan_box{
    min-height: 100vh;
    background: #F5F5F5;
    padding-top:24rpx;
    .box{
      width: 92%;
      margin:0 auto;
      background: #fff;
      border-radius: 4rpx;
      .top_text{
        color:#000;
        font-size:34rpx;
        font-weight: bold;
        text-align: center;
        padding-top:64rpx;
      }
      .img{
        text-align: center;
        margin:40rpx 0 56rpx;
        img{
          width: 84rpx;
          height: 84rpx;
          margin-right:16rpx;
        }
      }
      .input{
        height: 88rpx;
        border:1px solid #aaa;
        margin:0 54rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom:20rpx;
        input{
          font-size:28rpx;
          color:#222;
          margin-left:32rpx;
        }
        img{
          width: 40rpx;
          height: 40rpx;
          margin-right:32rpx;
        }
      }
      .text{
        font-size:24rpx;
        color:#666;
        margin:0 54rpx;
        line-height: 40rpx;
        span{
          color:red;
        }
      }
      .dh_anniu_box{
        display: flex;
        justify-content: space-between;
        margin:0 54rpx;
        margin-top:64rpx;
        padding-bottom:64rpx;
      }
    }
  }
}
</style>